<template>
  <div class="back">
    <header></header>
    <img class="logo" src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/logo.png" alt="">
    <img class="fest" src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/fest.png" alt="">
    <img class="gif" src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/cc4d938bfd067f1bf5d5b5bf7fce327b.gif" alt="">
    <aside>
      <div>
        <div class="menu" v-if="showMenu" @animationend="animationEnd">
        </div>
        <img  class="bubble" src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/bubble.png" v-if="showB1" alt="">
        <span class="b1" v-if="showB1">点我两下哦~</span>
       <img v-if="showd1" style="cursor: pointer;" @mouseover="showB1 = true" @mouseout="showB1 = false"
        class="denglong d1" src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/lantern.png" @click="startAnimation"  alt="">
      </div>
      <div>
        <img style="cursor: pointer;" id="playButton" :src="isPlaying ? 'https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/zanting.png' : 'https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/bofang.png'" @click="toggleMusic" />
        <audio v-show="false" :src="bgmSrc" ref="audioPlayer" autoplay controls @ended="audioFinished">你的浏览器不支持audio标签</audio>
      </div>
      <div @click="clear">
        <img style="cursor: pointer; position: absolute; bottom: 2%; right: 2%;width: 3.5%;" src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/clear.png" alt="">
      </div>
      
      <div v-if="newmenu" class="menu1"  @animationend="animationEnd1">
      <div class="menu-item"   @click="reduceAnimation">中奖名单</div>
      <div class="fist-prize">人员</div>
      <div class="line"></div>
      <div class="name">
        <div class="name-item" v-for="item in numbers" :key="item">
          {{ item }}
        </div>
      </div>


      </div>
    </aside>

    <main>
      <img class="main-wrap" src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/main-wrap-border.png" alt="">
      <div class="list">
        <vue-seamless-scroll :class-option="classOption" :data="blessings" class="warp">
        <ul >
          <li class="item" v-for="(item, index) in participate" :key="index" style="display: flex; margin-top: 2%;height: 12rem; list-style: none;">
            <div class="touxiang">
              
          </div>
          <div class="number">
            <img  src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/border-01.png" alt="">
            <img  src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/border-02.png" alt="">
            <img  src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/border-03.png" alt="">
            <img  src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/border-04.png" alt="">
            <div class="person">{{ item }}</div>
            <div><span>新年愿景及祝福：</span><span 
              style="color: black;">{{ getRandomBlessing() }}</span></div>
          </div>
        </li> 
        </ul>
      </vue-seamless-scroll>

      <div class="btn" :style="{ 'pointer-events': btnPointerEvents }" @click="startLottery">
      {{ btnText }}
    </div>

        <!-- 抽奖弹框 -->
      <div class="kuang" v-if="showWinnerModal">
        <div>
          <div class="block"> <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="t1"> user </el-avatar></div>
            <img class="chahao" src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/chahao.png" @click="closeWinnerModal"> 
          <!-- <button @click="closeWinnerModal">关闭</button> -->
          <div class="nameperson">{{ prize }}</div>
        </div>
      
    </div>


     </div>
    </main>
    <aside>
      <div>
        
        <img class="denglong d2" @click="link" src="https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/lantern.png" alt="">
     
      </div>
    </aside>
    <footer>
    
    </footer>
  </div>
</template>
<script>
 import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'Example01Basic',
    components: {
      vueSeamlessScroll
    },
  data() {
    return {
      bgmId: 0,
      bgmList: [
        require('../assets/music/shiji.mp3'),
        require('../assets/music/huanqin.mp3'),
        require('../assets/music/haoyuhnlai.mp3'),
      ],
      isPlaying: false,
      // userInteracted: false, // 新增标志位
      showMenu: false,
      newmenu: false,
      showd1:true,
      showB1:false,
      blessings: ["龙年到,好运绕,事事顺心润如潮。", "金龙翔,福星照,财富滚滚来到家。", "龙年喜,龙年财,健康快乐伴你来。", "龙年到,吉祥到,幸福美满乐逍遥。", "龙年旺,好运旺,成功辉煌笑开颜。", "龙年喜迎,好运归来,幸福快乐事事围绕。", "金龙降临,幸福相随,好运连连如意时。", "龙年纳福,财运亨通,健康快乐笑开颜。", "龙年旺盛,事业辉煌,幸福快乐与你相随。", "龙年吉祥,幸福绵长,好运连连笑开颜。", "龙年到来,福气沾身,幸福快乐多多益善。", "龙年纳福,好运降临,健康快乐伴你前行。", "龙年喜迎,幸福绵长,好运连连笑颜开。", "金龙高飞,福运到来,幸福快乐一整年。", "龙年吉祥,好运亨通,幸福快乐与你同行。", "龙年到,喜事多,幸福美满笑开颜。", "龙年纳福,好运来,健康快乐更多益善。", "龙年吉祥,福气绵长,幸福快乐笑逍遥。", "龙年到来,好运相伴,事业成功笑开颜。", "金龙翔舞,幸福到,财富滚滚笑开颜。", "龙年喜气,好运到,健康快乐幸福绕。", "龙年吉祥,福星高照,幸福快乐无边际。", "龙年纳福,好运连连,财富健康笑开颜。", "龙年喜迎,福运亨通,幸福快乐与你同行。", "龙年到,好运到,事业辉煌笑开颜。", "金龙翔,福星照,财富滚滚来到家。", "龙年喜,龙年财,健康快乐伴你来。", "龙年旺,好运旺,成功辉煌笑开颜。", "龙年喜迎,好运归来,幸福快乐事事围绕。", "金龙降临,幸福相随,好运连连如意时。", "龙年纳福,财运亨通,健康快乐笑开颜。", "龙年旺盛,事业辉煌,幸福快乐与你相随。", "龙年吉祥,幸福绵长,好运连连笑开颜。", "龙年到来,福气沾身,幸福快乐多多益善。", "龙年纳福,好运降临,健康快乐伴你前行。", "龙年纳福,福运到来,好事连连笑开颜。", "龙年吉祥,幸福绵长,财富滚滚喜逍遥。", "龙年到,好运到,健康快乐笑颜开。", "龙年喜气,幸福来,成功辉煌乐逍遥。", "龙年纳福,好运亨通,幸福快乐与你同行。", "龙年旺,事业旺,财富健康笑开颜。", "龙年喜迎,福星高照,幸福快乐无边际。", "龙年吉祥,好运多,健康快乐笑颜开。", "龙年到,福气到,幸福快乐事事好。", "龙年纳福,好运连连,财富健康笑开颜。", "龙年喜迎,福运亨通,幸福快乐与你同行。", "龙年旺,好运旺,事业成功笑开颜。", "龙年喜气,幸福到,健康快乐福星照。", "龙年吉祥,福运旺,幸福快乐笑逍遥。"],
      randomWish: '',
      classOption: {
        hoverStop: false,
        step: 1.5,
      },
      btnText: '开始抽奖',
      btnPointerEvents: 'auto', // 控制按钮是否可点击
      showWinnerModal: false,
      isbtn:false,
      priceNumber: [
        "刘雨婷",
        "宋海涛",
        "殷涛",
        "孙雪玲",
        "吕彦军",
        "崔金钥"
      ],
      prize: '',
      numbers: [],
      participate :[
        "孙健",
        "张智谋",
        "丛振忠",
        "吕彦军",
        "崔立鹏",
        "姜振亚",
        "任建强",
        "江羽",
        "王立",
        "刘士方",
        "柳明霞",
        "刘兵",
        "战里霞",
        "刘小利",
        "刘顺",
        "候娟",
        "张巧巧",
        "万峰林",
        "辛晓芹",
        "冯悦",
        "尹静",
        "姜靖",
        "王静",
        "马雪娇",
        "丁立芸",
        "梁晓琴",
        "李风田",
        "刘本杨",
        "王艳君",
        "管宝跃",
        "王磊",
        "张宏伟",
        "赫明月",
        "刘传铭",
        "刘媛媛",
        "朱瑞",
        "高学辉",
        "孙培鹏",
        "韩璐婧",
        "李绪刚",
        "封萍",
        "朱丽媛",
        "吴雷",
        "苏雪梅",
        "郭明",
        "王世磊",
        "张展赫",
        "孙慧玲",
        "王亚星",
        "徐洪兰",
        "魏巍",
        "吕云云",
        "李凯",
        "陈君鹏",
        "殷涛",
        "宋海涛",
        "孙雪玲",
        "崔金钥",
        "刘雨婷",
        "解吉昌",
        "高志安",
        "张则香",
        "王鲁霞",
        "薛琳",
        "孙志军",
        "巴帅",
        "罗文明",
        "孙宗吉",
        "孟华彬",
        "姚型然",
        "郑强",
        "陈琳",
        "杜娟",
        "李永亮",
        "安曰猛",
        "赵杰",
        "王聚军",
        "马增涛",
        "张乐德"
      ],
      
    };
  },
  computed: {
    bgmSrc: function () {
      return this.bgmList[this.bgmId];
    },
  },
  mounted() {
    // 监听用户交互事件
    // document.addEventListener('click', this.handleUserInteract);
  },
  created() {
    // 从localStorage中获取之前存储的值，并放入numbers数组
    const storedNumbers = localStorage.getItem('prizeNumbers');
    if (storedNumbers) {
      this.numbers = JSON.parse(storedNumbers);
    }

   
  },
  methods: {
    clear(){
      this.$confirm('确定删除所有名单人员, 是否继续?', '提示', {
        customClass: 'message-logout',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.numbers = [];
          localStorage.removeItem('prizeNumbers');
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    drawPrize() {
      // 使用 Math.random() 方法生成一个随机数
      const randomNumber = Math.floor(Math.random() * this.priceNumber.length);
      // 返回随机数对应的人名
      this.prize = this.priceNumber[randomNumber];
      this.numbers.push(this.prize);
      localStorage.setItem('prizeNumbers', JSON.stringify(this.numbers));
    },
    startLottery() { 
      this.isbtn = !this.isbtn;
      this.btnPointerEvents = 'none';
      if(this.isbtn){
        this.btnText = '正在滚动';
        this.classOption.step = 35;  
        
      // 模拟三秒后抽奖完成
      setTimeout(() => {
        this.btnText = '可以抽奖了';
        this.btnPointerEvents = 'auto';
        this.drawPrize();
      }, 3500);      
      }else{
        this.openWinnerModal();
      }
    },
    openWinnerModal() {
      this.classOption.step = 0;
      // 弹出抽奖结果弹框
      this.showWinnerModal = true;
      this.btnPointerEvents = 'none';
      // 模拟用户关闭弹框后的逻辑
      // setTimeout(() => {
      //   this.closeWinnerModal();
      // }, 3000);
    },
    closeWinnerModal() {
      this.showWinnerModal = false;
      this.btnText = '开始抽奖';
      this.btnPointerEvents = 'auto';
      this.classOption.step = 1.5;
    },
    getRandomBlessing() {
      // 生成随机索引
      const randomIndex = Math.floor(Math.random() * this.blessings.length);
      // 返回随机的祝福语
      return this.blessings[randomIndex];
    },
    reduceAnimation() {
      this.$nextTick(() => {
        // this.showd1 = true;
        this.showB1 = false;
        let menu1 = document.querySelector('.menu1');
        let d1 = document.querySelector('.denglong.d1');
        menu1.classList.add('animate3');
        d1.classList.remove('animate1');
        d1.classList.add('animate2');
        // 给d1添加类名.animate1   
    });
    },
    startAnimation() {
      this.$nextTick(() => {
        // 给menu添加类名.animate
        this.showMenu = true; // 确保menu显示
        let menu = document.querySelector('.menu');
        let d1 = document.querySelector('.denglong.d1');
        menu.classList.add('animate');
        d1.classList.add('animate1');
        this.showB1 = false;
        // 给d1添加类名.animate1   
    });
    },
    animationEnd1(){
      this.newmenu = false;
      this.showd1 = true;
    },
    animationEnd() {
      this.showB1 = false;
      // 动画结束后设置 showMenu 为 false
      this.showMenu = false;
      this.newmenu = true;
      this.showd1 = false;
    },
    handleUserInteract() {
      // 用户进行了交互,移除事件监听,并开始播放音乐
      document.removeEventListener('click', this.handleUserInteract);
      this.toggleMusic();
      // this.userInteracted = true;
    },
    toggleMusic() {
      // console.log(111);
      const audioPlayer = this.$refs.audioPlayer;

      // if (!this.userInteracted) {
      //   return; // 用户还未进行交互时不执行播放操作
      // }

      if (this.isPlaying) {
        audioPlayer.pause();
      } else {
        audioPlayer.play();
      }

      this.isPlaying = !this.isPlaying;
    },
    audioFinished() {
      console.log('over');
      if (this.bgmId < this.bgmList.length - 1) {
        this.bgmId++;
      } else {
        this.bgmId = 0;
      }
    },
    link(){
      this.$router.replace('/view')
    },
  },
};
</script>
<style lang="scss" scoped>
 @import '../app.scss';
</style>